<template>
	<view class="tab_contents" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<view class="hei100 dis disAl disJuB" style="width: 33.33%;" v-for="(item,tab_index) in datalist" :key="index"
		:style="'color: '+(index == tab_index?back:'#9A999A')+';'" @click="changeme(tab_index)">
			<view class="textCen wid100">
				 <!-- style="overflow: hidden;" -->
				<view class="image mar poRel">
					<view class="image bacFFF poAbs" style="left: -100%;z-index: 10;"></view>
					<image :src="aurl+item.icon" class="wh100" :style="'filter: drop-shadow(50rpx 0 '+
						(index == tab_index?back:'#9A999A')+');transform: translateZ(0px);margin-left: -200%;'"></image>
				</view>
				<view>{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aurl: this.global.url,
				paddingBottomHeight: 0
			}
		},
		props: {
			back: {
				default: '',
				type: String
			},
			backTwo: {
				default: '',
				type: String
			},
			datalist: {
				default: Array,
				type: Array
			},
			index: {
				default: 0,
				type: Number
			},
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		methods: {
			changeme(tab_index){
				if(tab_index != this.index){
					var url = this.datalist[tab_index].url
					console.log(url)
					uni.switchTab({
						url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.tab_contents{
	font-size: 25rpx;
	border-top: 1rpx solid #f1f1f1;
	padding: 10rpx 0;
	position: fixed;
	bottom: 0;
	z-index: 99999;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	background-color: #fff;
	height: 100rpx;
	.image{
		width: 50rpx;
		height: 50rpx;
	}
}
</style>
